<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.js"></script>
    <style>
        dl {
            margin: 0;
        }
        .friend-list {
            border: 1px solid #000000;
            width: 200px;
        }
        .friend-group dt {
            padding: 10px;
            background-color: rgb(64, 158, 255);
            font-weight: bold;
        }
        .friend-group dd {
            padding: 10px;
            display: none;
        }
        .friend-group.expanded dd {
            display: block;
        }
        .friend-group dd.checked {
            background: green;
        }
    </style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function FriendList(){
    let [openName,setOpenName] = React.useState("");
    let [state,setState] = React.useState({
        family: {
            title: '家人',
            list: [
                {name: '爸爸'},
                {name: '妈妈'}
            ]
        },
        friend: {
            title: '朋友',
            list: [
                {name: '张三'},
                {name: '李四'},
                {name: '王五'}
            ]
        },
        customer: {
            title: '客户',
            list: [
                {name: '阿里'},
                {name: '腾讯'},
                {name: '头条'}
            ]
        }
    });
    return (
        <div className="friend-list">
            {Object.keys(state).map(item=>{
                return <Dl setOpenName={setOpenName} openName={openName} data={state[item]} key={item} />
            })}
        </div>
    );
}
function Dl(props){
    let {data,openName,setOpenName} = props;
    return (<dl className={"friend-group " + (openName===data.title?"expanded":"")}>
        <dt onClick={()=>{
            setOpenName(openName===data.title?"":data.title);
        }}>{data.title}</dt>
        {
            data.list.map((item,index)=>{
                return <dd key={index}>{item.name}</dd> 
            })
        }
    </dl>);
}
ReactDOM.render(
    <FriendList />,
    document.querySelector("#root")
);
</script>    
</body>
</html>